<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="libs/html5shiv.js"></script>
    <script type="text/javascript" src="libs/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="libs/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="libs/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>添加用户 - H-ui.admin v3.1</title>
    <meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
    <style>
        .bg-div {
            background: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
        }
        .box-div {
            border: black;
            display: inline-block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            width: 400px;
            height: 180px;
            background: white;
        }
        .head-div{
            height: 20px;
        }
        .input-div {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        .btn-s {
            width: 100px;
            margin-left: 150px;
        }
    </style>
</head>
<body>
<article class="page-container">
    <form action="" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>发型图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="file" id="file" style="display:none;" onchange="filechange(event)">
                <img src="" width="200px" height="200px" id="img-change">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username" maxlength="16" minlength="2">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" id="sex-1" checked>
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="sex">
                    <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-3" name="sex">
                    <label for="sex-3">保密</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">年龄：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="age" name="age">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职位：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <div class="col-xs-4 col-sm-3">
                    <span class="select-box">
                        <select class="select" size="1" name="city">
                            <option value="" selected>职位</option>
                            <option value="1">技术总监</option>
                            <option value="2">发型总监</option>
                            <option value="3">特约发型师</option>
                        </select>
                    </span>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">擅长发型：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <div class="col-xs-4 col-sm-3">
                    <span class="select-box">
                        <select class="select" size="1" name="city">
                            <option value="" selected>擅长发型</option>
                            <option value="1">长</option>
                            <option value="2">短</option>
                            <option value="3">流海</option>
                        </select>
                    </span>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">简介：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="beizhu" id="mYtextarea" name="mYtextarea" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" onKeyUp="limitTextarea(this,'#mYtextarea','.textarea-length')"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-6 col-sm-3 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;保存&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="libs/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="libs/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="libs/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="libs/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="libs/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="customers-js/textarea-length.js"></script>
<script type="text/javascript">

    $("#img-change").click(function () {
        $("#file").click();
    })
    var filechange=function(event){
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            if(file.size > 1024 * 1024 * 2) {
                alert('图片大小不能超过 2MB!');
                return false;
            }
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            //用attr将img的src属性改成获得的url
            $("#img-change").attr("src",imgURL);
            // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
            // URL.revokeObjectURL(imgURL);
        }
    };
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-member-add").validate({
            rules:{
                username:{
                    required:true,
                    minlength:2,
                    maxlength:16,
                },
                mobile:{
                    required:true,
                    isMobile:true,
                    minlength:11,
                    maxlength:11,
                },
                IdCardNo:{
                    isIdCardNo:true,
                    minlength:18,
                    maxlength:18,
                },
                phone: {
                    isPhone:true,
                },
                QQ: {
                    isQq:true,
                },
                mYtextarea: {
                    maxlength:100
                }
            },
            onkeyup:true,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                //$(form).ajaxSubmit();
                var index = parent.layer.getFrameIndex(window.name);
                //parent.$('.btn-refresh').click();
                parent.layer.close(index);
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>